<template>
  <q-page class="page-map row">
    <weather ref="weather" class="weather-panel" :weatherList="weatherList" />
    <div class="col bg-grew" ref="map"></div>
  </q-page>
</template>

<script>
import * as maptalks from 'maptalks';
import { createMap } from 'boot/map';
import { result } from 'lodash';
import Weather from './weather.vue';

export default {
  name: 'IndexPage',
  components: {
    Weather
  },
  data() {
    return {
      weatherList: [],
      ai: 0,
      i: 0,
      start: '2024-09-01',
      end: '2024-09-03',
      platformList: [{
        receive_date: '2024-09-04 10:42:27',
        mmsi: '413271530',
        course: '158.4',
        lon: '117.8214583',
        id: '66d7c91c2d0eb014f729e309',
        lat: '38.6306016',
        speed: '0.0',
        direction: '94.0',
        status: '0'
      }
      ],
      shipPath: [],
      platformLayer: null,
      pathLayer: null,
    };
  },
  methods: {
    getSymbol() {
      return [
        {
          lineColor: '#FF00FF',
          lineWidth: 2,
        },
        {
          markerType: 'ellipse',
          markerWidth: 8,
          markerHeight: 8,
          markerFill: '#fff',
          markerLineColor: '#f00',
          markerPlacement: 'vertex',
        },
      ];
    },
    createPlatform() {
      this.platformLayer.clear();
      this.platformList.forEach((platform) => {
        new maptalks.Marker([platform.lon, platform.lat], {
          symbol: {
            markerFile: '/img/map/yellow.png',
            markerWidth: 20,
            markerHeight: 20,
            markerDx: 0,
            markerDy: 0,
            markerOpacity: 1,
            markerRotation: -(platform.direction + 180),
          },
        })
          .addTo(this.platformLayer)
          .on('click', ({ target }) => {
            target.openInfoWindow();
          })
          .setInfoWindow({
            dx: 0,
            dy: 0,
            title: ' 2号钻井平台',
            content: `<B>平台名称: 2号钻井平台<BR>MMSI: ${platform.mmsi}<BR>速度: ${platform.speed}节<BR>船艏向: ${platform.direction}度<BR>航迹向: ${platform.course}度<BR>时间: ${platform.receive_date}<BR>纬度: ${platform.lon}N<BR>经度: ${platform.lat}E</B>`,
          });
      });
    },
    drawArrow(from, to) {
      const result = to;
      const polyLine = new maptalks.LineString(
        [
          [from.lon - 0, from.lat - 0],
          [to.lon - 0, to.lat - 0],
        ],
        {
          arrowStyle: 'classic', // we only have one arrow style now
          arrowPlacement: 'vertex-last', // vertex-first, vertex-last, vertex-firstlast, point
          symbol: {
            lineColor: '#FF00FF',
            lineWidth: 2,
          },
        }
      );
      polyLine
        .addTo(this.pathLayer)
        .on('click', ({ target }) => {
          target.openInfoWindow();
        })
        .setInfoWindow({
          dx: 0,
          dy: 0,
          title: '2号钻井平台',
          content: `<B>船名: 2号钻井平台<BR>MMSI: ${result.mmsi}<BR>速度: ${result.speed}节<BR>船艏向: ${result.direction}度<BR>航迹向: ${result.course}度<BR>时间: ${result.receive_date}<BR>纬度: ${result.lon}N<BR>经度: ${result.lat}E</B>`,
        });
    },
    clearShipPath() {
      this.pathLayer.clear();
    },
    showShipPath() {
      if (this.map) {
        this.pathLayer.clear();
        for (let i = 1; i < this.shipPath.length; i += 1) {
          this.drawArrow(this.shipPath[i - 1], this.shipPath[i]);
        }
      }
    },
    getPlatform() {
      this.$axios.get('/wea/predictRoute/queryById', {
        params: {
          id: this.$route.query.id,
        }
      }).then(({ result }) => {
        result.weaPredictRouteDetailList.forEach((item) => {
          const date = {
            receive_date: item.recordTime,
            mmsi: result.platformIdName,
            lon: item.lon,
            lat: item.lat,
          };
          this.shipPath.push(date);
        });
      });
    },

  },

  async mounted() {
    this.getPlatform();
    this.map = await createMap(this.$refs.map, { main: false, draw: true, zoom: 5, lon: '126.528531', lat: '29.04855' });
    this.platformLayer = new maptalks.VectorLayer('platform').addTo(this.map);
    this.pathLayer = new maptalks.VectorLayer('path').addTo(this.map);
    this.createPlatform();
    this.showShipPath();
    this.$refs.weather.initWeatherList(this.$route.query.id);
  },

  computed: {
  },

};
</script>

<style lang="stylus"
       scope>
.page-map
  .q-select
    position absolute
    right 200px
    top 30px
    width 164px
    height 40px
    z-index 1000
    background url('~assets/home/sbg.png')
    .q-field__native
      padding-left 60px
      font-size 16px
      color #4b94ed
  .weather-panel
    position absolute
    right 60px
    top 75px
    z-index 1000
  .q-btn
    position absolute
    right 20px
    top 30px
    width 164px
    height 40px
    z-index 1000

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
};
.provider-name {
    font-size: 12px;
    line-height: 16px;
    font-weight: normal;
    color: var(--weather_map_sidebar_card_subtitle_color);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
